<template>
  <div class="product-list">
    <div class="product-item-wrapper" v-for="(item,index) in goodsList" @click="toGoods(item.goods_id)">
      <div class="product-item" :class="[index%2===0 ? 'left' : 'right', '']">
        <div class="product-image">
          <img v-lazy="item.thumb_url" alt="">
        </div>
        <div class="product-name">
          <span>{{item.goods_name}}</span>
        </div>
        <div class="detail">
          <span class="price" v-if="item.group">
            <i>￥</i>{{item.group.price/100}}</span>

          <span class="price" v-else>
            <i>￥</i>{{item.price/100}}</span>

          <span class="info">{{item.sales_tip}}</span>
        </div>
      </div>
    </div>
    <loading v-show="hasMore"></loading>
    <div class="noMore" v-show="!hasMore">
      <div class="noMore-line"></div>
      <p>没有更多商品了</p>
    </div>
  </div>
</template>

<script>
import Loading from "../../components/loading/loading";
export default {
  components: {
    Loading
  },
  props: {
    goodsList: {
      type: Array,
      default: null
    },
    hasMore: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toGoods(id) {
      this.$router.push({ path: `/goods/${id}` });
    }
  }
};
</script>

<style lang="less" scoped>
.noMore {
  position: relative;
  height: 0.5rem;
  width: 100%;
  line-height: 0.5rem;
  text-align: center;
  color: #999;
  p {
    position: relative;
    width: 1.36rem;
    font-size: 0.14rem;
    color: #9c9c9c;
    margin-left: auto;
    margin-right: auto;
    background-color: #f4f4f4;
  }
  .noMore-line {
    position: absolute;
    width: 100%;
    height: 0.25rem;
    border-bottom: 1px solid #e0e0e0;
    margin-left: auto;
    margin-right: auto;
  }
}
.product-item-wrapper {
  width: 50%;
  position: relative;
  display: inline-block;
  margin-bottom: 0.03rem;
  .product-item {
    background-color: white;
  }
  .left {
    margin-right: 0.015rem;
  }
  .right {
    margin-left: 0.015rem;
  }
  .detail {
    display: flex;
    line-height: 0.31rem;
    justify-content: space-between;
  }
  .product-name {
    position: relative;
    padding: 0.08rem 0.08rem 0;
    width: 100%;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    text-align: justify;
    font-size: 0.13rem;
    color: #333;
    height: 0.44rem;
    line-height: 1.5;
  }
  .detail {
    width: 100%;
    padding: 0.02rem 0.07rem 0;
    position: relative;
    height: 0.31rem;

    .price {
      color: #ee2e3a;
      font-weight: 700;
      i {
        font-size: 0.1rem;
      }
    }
    .info {
      font-size: 0.13rem;
      color: #9c9c9c;
    }
  }
  img {
    width: 1.86rem;
    height: 1.86rem;
    overflow: hidden;
  }
}
</style>

